<template>
  <scroll ref="recomWrapScroll">
    <div class="recommend-container">
      <div class="circle-nav-bgcolor">
        <div class="circle-container">
          <div class="circle-top">
            <div class="left">兴趣圈</div>
            <div class="right">
              <div class="join-num">{{ data.circle_join_num }}人已加入</div>
              <div class="animation-user-icon-wrap">
                <transition-group name="icon-animation">
                  <a
                    class="animation-user-icon"
                    v-for="(item, index) of data.circle_join_user"
                    :key="item.user_icon"
                    v-show="index === userIconIndex"
                  >
                    <img :src="item.user_icon" />
                  </a>
                </transition-group>
              </div>
              <div class="iconfont icondayuhao icon"></div>
            </div>
          </div>
          <div class="circle-content">
            <scroll
              class="circle-scroll"
              :data="data.circle_list.items"
              :scrollX="scrollX"
              :direction="horizontal"
              ref="circleScroll"
            >
              <div class="circle-scroll-wrap">
                <a v-for="(item, index) of data.circle_list.items">
                  <div class="icon-wrap">
                    <img v-lazy="item.img" class="circle-icon" />
                  </div>
                  <div class="circle-name">{{ item.title }}</div>
                  <div class="circle-desc">
                    <span v-if="item.description">{{ item.description }}</span>
                    <span v-else-if="item.join_num"
                      >{{ item.join_num }}个小伙伴
                    </span>
                  </div>
                </a>
              </div>
            </scroll>
          </div>
        </div>
        <div class="nav-container">
          <a v-for="(item, index) of data.channel_list" :key="index">
            <img v-lazy="item.img" />
          </a>
        </div>
      </div>
      <div class="waterfall-container" ref="waterfallWrap">
        <div
          class="waterfall-item"
          v-for="(view, index) of recommend_list"
          :key="index"
          ref="waterfallItem"
        >
          <a>
            <div class="img-container">
              <img v-lazy="pic" class="img" v-for="pic of view.item.pic_list" />
            </div>
            <div class="info">
              <div class="relative-tag">
                <template v-for="tagData of view.item.tag_list">
                  <img class="tag-icon" src="./handbag.png" />
                  <span class="tag-name">{{ tagData.tag }}</span>
                </template>
              </div>
              <div class="item-title">{{ view.item.name }}</div>
              <div class="relative-topic">
                <div class="left">
                  <img v-lazy="view.item.icon" class="user-icon" />
                  <span class="topic-info">{{ view.item.nickname }}</span>
                </div>
                <div class="right">
                  <img src="https://m.mi.com/static/img/eye.12d518c6a6.png" />
                  <span class="view-num">{{ view.item.view_num }}</span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from 'common/scroll/scroll'
import data from 'assets/json/planet-recommend'

// console.log(data.data.recommend_list)
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      userIconIndex: 0,
      horizontal: 'horizontal',
      scrollX: true,
      recommend_list: data.data.recommend_list
    }
  },
  mounted() {
    this.timer = null
    this.runUserIconAnimation(this.data.circle_join_user)

    this.setWaterFall(this.$refs.waterfallWrap, this.$refs.waterfallItem)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  activated() {
    // clearInterval(this.timer)
    this.runUserIconAnimation(this.data.circle_join_user)
  },
  deactivated() {
    clearInterval(this.timer)
    this.timer = null
  },

  methods: {
    runUserIconAnimation(array) {
      let max = array.length - 1
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        console.log('run setInterval')
        this.userIconIndex = (this.userIconIndex + 1) % (max + 1)
      }, 1500)
    },
    setWaterFall(wrap, child) {
      let boxWidth = child[0].clientWidth
      let boxNum = parseInt(wrap.clientWidth / boxWidth)
      let interval = wrap.clientWidth % boxWidth
      let heightArr = []

      child.forEach((item, index) => {
        if (index < boxNum) {
          heightArr.push(item.clientHeight + interval)
          item.style.left = (index % boxNum) * (boxWidth + interval) + 'px'
          item.style.top = '0px'
        } else {
          let minHeight = heightArr.reduce((height, nextHeight) =>
            height <= nextHeight ? height : nextHeight
          )
          let mixHeightIndex = heightArr.findIndex(
            height => height === minHeight
          )

          item.style.left =
            (mixHeightIndex % boxNum) * (boxWidth + interval) + 'px'
          item.style.top = minHeight + 'px'
          heightArr[mixHeightIndex] = minHeight + item.clientHeight + interval
        }
      })

      let maxHeight = heightArr.reduce((height, nextHeight) =>
        height >= nextHeight ? height : nextHeight
      )
      wrap.style.height = maxHeight + 'px'

      this.$refs.recomWrapScroll.refresh()
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
@import '~assets/stylus/mixin';

.recommend-container {
  background: #f5f5f5;

  .circle-nav-bgcolor {
    background: linear-gradient(180deg, #fdfdfd, #f5f5f5);
    overflow: hidden;

    .circle-container {
      margin: auto;
      padding-top: 0.36rem;
      padding-bottom: 0.24rem;
      width: 6.72rem;
      border-radius: 0 0 0.16rem 0.16rem;
      background: #fff;
      color: #3c3c3c;

      .circle-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.34rem;

        .left {
          margin-left: 0.24rem;
          font-size: 0.28rem;
          line-height: 0.32rem;
          font-weight: 700;
          color: #000;
        }

        .right {
          display: flex;
          align-items: center;

          .join-num {
            margin-right: 0.16rem;
            font-size: 0.24rem;
            font-weight: 700;
          }

          .animation-user-icon-wrap {
            margin-right: 0.1rem;
            display: inline-block;
            position: relative;
            width: 0.373rem;
            height: 0.373rem;
            border-radius: 50%;
            overflow: hidden;

            .animation-user-icon {
              position: absolute;
              display: inline-block;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .icon {
            font-size: 0.2rem;
          }
        }
      }

      .circle-content {
        margin-bottom: 0.24rem;
        overflow: hidden;

        .circle-scroll-wrap {
          display: inline-flex;
          flex-wrap: nowrap;

          a {
            display: inline-block;
            padding-top: 0.2rem;
            width: 1.9rem;
            text-align: center;

            .icon-wrap {
              position: relative;
              width: 1.127rem;
              height: 1.127rem;
              margin: auto;
              margin-bottom: 0.113rem;

              img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 4rem;
              }
            }

            .circle-name {
              font-size: 0.24rem;
              font-weight: 700;
              color: #000;
              line-height: 0.32rem;
              margin-bottom: 0.04rem;
            }

            .circle-desc {
              color: rgba(0, 0, 0, 0.5);
              font-size: 0.2rem;
              line-height: 0.26rem;
              font-weight: 400;
              font-family: MI-LANTING_GB-OUTSIDE-YS, MI-LANTING_GB-OUTSIDE;
            }
          }
        }
      }
    }

    .nav-container {
      display: flex;
      margin: 0.2rem auto;
      width: 6.72rem;
      justify-content: space-between;
      align-items: center;

      a {
        display: inline-block;
        width: 1.56rem;
        height: 1.56rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .waterfall-container {
    position: relative;
    margin: auto;
    width: 6.72rem;

    .waterfall-item {
      position: absolute;
      display: inline-block;
      width: 3.28rem;
      background-color: #fff;
      border-radius: 0.16rem;
      overflow: hidden;
      color: #3c3c3c;

      a {
        display: inline-block;
      }

      .img-container {
        width: 3.28rem;
        height: 3.28rem;
        overflow: hidden;
        border-radius: 0.1rem 0.1rem 0 0;

        .img {
          display: inline-block;
          width: 100%;
          height: auto;
        }
      }

      .info {
        margin: auto;
        padding: 0.16rem 0 0.24rem;
        width: 2.8rem;
        text-align: left;

        .relative-tag {
          .tag-icon {
            display: inline-block;
            margin-right: 0.08rem;
            width: 0.213rem;
            height: 0.213rem;
          }

          .tag-name {
            font-size: 0.2rem;
            font-family: MI-LANTING_GB-OUTSIDE;
            font-weight: 400;
            line-height: 0.26rem;
            color: rgba(0, 0, 0, 0.5);
          }
        }

        .item-title {
          margin: 0.16rem 0;
          font-size: 0.28rem;
          width: 100%;
          font-family: MI-LANTING_GB-OUTSIDE;
          font-weight: 400;
          color: #333;
          line-height: 0.4rem;
          max-height: 0.8rem;
          // CSS实现文本显示两行，超出部分显示省略号（常用到）
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .relative-topic {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            display: flex;
            align-items: center;

            .user-icon {
              flex: 0 0 0.46rem;
              display: inline-block;
              width: 0.46rem;
              height: 0.46rem;
              border-radius: 10rem;
            }

            .topic-info {
              margin-left: 0.1rem;
              flex: 1;
              no-wrap();
              width: 150px;
              max-width: 1.26rem;
              font-size: 0.2rem;
              font-family: MI-LANTING_GB-OUTSIDE;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.5);
            }
          }

          .right {
            img {
              display: inline-block;
              width: 0.247rem;
            }

            .view-num {
              margin-left: 0.1rem;
              font-size: 0.2rem;
              font-family: FZLTZHUNHK--GBK1;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.5);
              line-height: 0.233rem;
            }
          }
        }
      }
    }
  }
}

.icon-animation-enter-active, .icon-animation-leave-active {
  transition: all 1s;
}

.icon-animation-enter {
  transform: scale(0);
}

.icon-animation-leave-to {
  opacity: 0;
}
</style>
